<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.red {color:red;}
			
			.blue {color:blue;}
			
			.active {letter-spacing: 2em;}
		</style>
	</head>
	<body>
		<div id="app">
			<!--数组-->
			<p v-bind:class="['red']">
				{{msg}}
			</p>
			<button type="button" v-on:click="start">start</button>
			<button type="button" v-on:click="stop">stop</button>
			
		</div>
		<script>
			var vue = new Vue({
				el:'#app',
				data:{
					msg:'王子元真好看！',
					classlist:['blue'],
					objclass:{'red':false,'blue':true},
					objclass1:{'active':false},
					isshow:true,
					timer:null
				},
				methods:{
					start(){
						console.log(this)
						
						//限制只有timer为null的时候才能启动，否则可能重复启动
						if (this.timer !== null) return;
						
						//创建定时器
						//通过箭头函数使定时器内部的this指向vue实例
						this.timer = setInterval(()=>{
							//substring当只有一个参数n时，表示截取从下标为n到结尾的字符串
							this.msg = this.msg.substring(1)+this.msg.substring(0,1);
						},400)
					},
					stop(){
						clearInterval(this.timer);
						//停止后重置定时器
						this.timer = null;
					}
				}
			})
		</script>
	</body>
</html>
